<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">

<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<table id="myTable"></table>
<div id="tb">
    <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#addLayer">添加记录</button>

</div>
<!--记录添加弹出层 -->
<div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加记录</h4>

            </div>
            <!--=========================================================================================  -->
            <div class="modal-body">
                <form id="myForm">
                    名字<input type="text" class="form-control"  name="name">
                    年龄<input type="text" class="form-control" name="age">
                    性别<input type="text" class="form-control" name="sex">
                </form>
            </div>
            <!--=========================================================================================  -->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="sub()">确认添加</button>
            </div>

        </div>
    </div>
</div>

<!-- 修改 -->
<div class="modal fade" id="editLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">修改记录</h4>

            </div>
            <!--===================================================================================  -->
            <div class="modal-body">
                <form id="myForm1" class="form-horizontal">
                    <input type="hidden" id="id" class="form-control" name="id"> <br>
                    名字<input type="text" class="form-control"  name="name" id="name">
                    年龄<input type="text" class="form-control" name="age" id="age">
                    性别<input type="text" class="form-control" name="sex" id="sex">

                </form>
            </div>
            <!--===================================================================================  -->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="update()">确认修改</button>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    $("#myTable").bootstrapTable({
        url:"cart/queryCartList",
        columns:[
            {field: "",checkbox:true},
            {field: "id", title:"编号"},
            {field: "userId", title:"用户编号"},
            {field: "productImage", title:"图片",formatter:function (value,row,index){
                    return "<img width='50px' height='50px' src='"+value+"'>";
                }},
            {field: "productName", title:"商品名称"},
            {field: "productPrice",title: "价格"},
            {field: "tool", title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del('+row.userId+','+row.productId+')">删除</button>';
                    var str1='<button class="btn btn-success"  data-toggle="modal" data-target="#editLayer" onclick="getId('+row.id+')">查看评论</button>';

                    return str+"   "+str1;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })
    function del(id,productId){
        $.ajax({
            url:"cart/del",
            data:{id:id,productId:productId},
            success:function(){
                //bootbox.confirm("成功", "info")
                $("#myTable").bootstrapTable('refresh');
            }
        })
    }
    function sub(){
        $.ajax({
            url:"../zyc/book/add",
            type:"post",
            data:$("#myForm").serialize(),
            dataType:"json",
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide');
            },error:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide'); //关闭弹窗
            }
        })
    }
    function getId(id){
        $.ajax({
            url:"../zyc/book/gethui",
            data:{id:id},
            type:"post",
            dataType:"json",
            success:function(data){
                $("#id").val(data.id);
                $("#name").val(data.name);
                $("#sex").val(data.sex);
                $("#age").val(data.age);

            }
        })
    }
    function update(){
        $.ajax({
            url:"../zyc/book/update",
            type:"post",
            data:$("#myForm1").serialize(),
            dataType:"json",
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#editLayer").modal('hide');
            },error:function(){
                alert("成功")
                $("#myTable").bootstrapTable('refresh');
                $("#editLayer").modal('hide'); //关闭弹窗
            }
        })
    }
</script>
</html>